<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>梗体中文 · 在线构建</title>
    <meta content="梗体中文 · 在线构建" property="og:title">
    <meta content="website" property="og:type">
    <meta content="梗体中文资源包在线构建系统，帮助用户构建。" property="og:description">
    <script src="https://cdn.jsdelivr.net/combine/npm/axios@0.19.2/dist/axios.min.js,npm/vue@2,npm/vuetify@2,npm/moment@2.24.0/min/moment.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
    <style>
        .v-main__wrap > container {
            margin-top: 16px;
            margin-bottom: 16px;
        }

        .v-alert {
            margin-bottom: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <v-app>
        <v-main>
            <v-app-bar
                    outlined
                    color="white">
                <v-toolbar-title>梗体中文 · 在线构建
                    <sub v-if="$vuetify.breakpoint.name !== 'xs'"><small>Sponsored by SPGoding</small></sub>
                </v-toolbar-title>
                <v-spacer></v-spacer>
                <div v-if="$vuetify.breakpoint.name !== 'xs'">
                    <v-btn text rel="noopener noreferrer"
                           href="https://github.com/lakejason0/mcwzh-meme-resourcepack/releases">
                        <v-icon>mdi-github-circle</v-icon>&emsp;Release 下载
                    </v-btn>
                    <v-btn text rel="noopener noreferrer" href="https://www.mcbbs.net/thread-1004643-1-1.html">
                        <v-badge color="red" content="宣传中" offset-x="15" offset-y="0.1">MCBBS</v-badge>
                    </v-btn>
                    <v-btn text rel="noopener noreferrer" href="https://github.com/lakejason0/mcwzh-meme-resourcepack">
                        <v-icon>mdi-github-circle</v-icon>
                    </v-btn>
                </div>
                <div v-else>
                    <v-menu bottom left>
                        <template v-slot:activator="{ on, attrs }">
                            <v-btn
                                    icon
                                    v-bind="attrs"
                                    v-on="on"
                            >
                                <v-icon>mdi-dots-vertical</v-icon>
                            </v-btn>
                        </template>

                        <v-list dense>
                            <v-list-item>
                                <v-list-item-text>Sponsored by SPGoding</v-list-item-text>
                            </v-list-item>
                            <v-list-item rel="noopener noreferrer"
                                         href="https://github.com/lakejason0/mcwzh-meme-resourcepack/releases">
                                <v-list-item-icon>
                                    <v-icon>mdi-github-circle</v-icon>
                                </v-list-item-icon>
                                <v-list-item-text>
                                    Release 下载
                                </v-list-item-text>
                            </v-list-item>
                            <v-list-item rel="noopener noreferrer" href="https://www.mcbbs.net/thread-1004643-1-1.html">
                                <v-list-item-icon>
                                    <v-icon>mdi-open-in-new</v-icon>
                                </v-list-item-icon>
                                <v-list-item-text>
                                    MCBBS 宣传中
                                </v-list-item-text>
                            </v-list-item>
                            <v-list-item rel="noopener noreferrer"
                                         href="https://github.com/lakejason0/mcwzh-meme-resourcepack">
                                <v-list-item-icon>
                                    <v-icon>mdi-github-circle</v-icon>
                                </v-list-item-icon>
                                <v-list-item-text>
                                    查看 Github 仓库
                                </v-list-item-text>
                            </v-list-item>
                        </v-list>
                    </v-menu>
                </div>
            </v-app-bar>
            {% if header_existence %}
                {% include './custom/header.html' %}
            {% endif %}
            <v-container>
                <v-row>
                    <v-col cols="6" sm="4">
                        <v-select label="语言版本" :items="consts.type" v-model="inputBasic.type"></v-select>
                    </v-col>
                    <v-col cols="6" sm="4">
                        <v-select label="材质选择" :items="consts.figureOption" v-model="input.figureOption"></v-select>
                    </v-col>
                    <v-col cols="12" sm="4">
                        <v-select label="Mod内容选择" :items="consts.modOption" v-model="input.modOption"></v-select>
                    </v-col>
                </v-row>
                <v-checkbox label='Suitable for work ("_sfw")' v-model="inputBasic.sfw"></v-checkbox>
                <v-checkbox label='旧版（1.12.2及以下）语言文件格式' v-model="inputBasic.legacy"></v-checkbox>
                <v-checkbox label='调试模式' v-model="inputBasic.debug"></v-checkbox>
                <v-row>
                    <v-col cols="12" sm="6">
                        <v-select
                                label="Mod/附加内容选择" :disabled="input.modOption !== 'custom'" multiple
                                :items="consts.modList" v-model="input.include"
                        ></v-select>
                    </v-col>
                    <v-col cols="12" sm="6">
                        <v-select label="附加包/材质选择" :disabled="input.figureOption !== 'custom'" multiple
                                  :items="consts.figureList" v-model="input.figure"></v-select>
                    </v-col>
                </v-row>
                <v-btn color="primary" @click="submit" :disabled="loading" :loading="loading">
                    <v-icon left>cloud_download</v-icon>
                    提交构建选项
                </v-btn>
                <div v-if="logs.length >= 1">
                    <v-divider style="margin:15px 0"></v-divider>
                    <p class="headline" ref="logs">构建日志</p>
                    <v-expansion-panels v-model="logsPanel" multiple>
                        <v-expansion-panel
                                v-for="(item,i) in logs"
                                :key="i"
                        >
                            <v-expansion-panel-header>
                                {% raw %}{{moment(new Date(item.ts)).format('YYYY-MM-DD HH:mm:ss')}} {{ item.title }}{% endraw %}
                            </v-expansion-panel-header>
                            <v-expansion-panel-content>
                                <pre style="padding-bottom:15px;white-space: pre-wrap;font-family: 'Cascadia Code', 'Fira Code','Consolas', monospace;">{% raw %}{{item.content}}{% endraw %}</pre>
                                <v-btn v-if="item.filename" @click="download(item.filename)" outlined color="indigo">
                                    下载
                                </v-btn>
                                <v-btn v-else
                                       @click="download('https://github.com/lakejason0/mcwzh-meme-resourcepack/issues/new/choose')"
                                       dark color="black">
                                    <v-icon left>bug_report</v-icon>
                                    反馈
                                </v-btn>
                            </v-expansion-panel-content>
                        </v-expansion-panel>
                    </v-expansion-panels>
                </div>
                <v-divider style="margin:15px 0"></v-divider>
                <v-row>
                    <v-col col="12" md="6">
                        <v-card outlined>
                            <v-list-item three-line>
                                <v-list-item-content>
                                    <div class="overline mb-4">SPONSER</div>
                                    <v-list-item-title class="headline mb-1">梗体中文 由 SPGoding 赞助</v-list-item-title>
                                    <v-list-item-subtitle>SPGoding 是一位 Mojira 助手、MCBBS 艺术家，代表作《大憨批》VSCode 插件。ta
                                        热心的赠送了梗体中文 7 天的 MCBBS 广告位。
                                    </v-list-item-subtitle>
                                </v-list-item-content>

                                <v-list-item-avatar tile color="grey" size="80">
                                    <v-img src="https://www.mcbbs.net/uc_server/data/avatar/002/44/43/78_avatar_big.jpg"></v-img>
                                </v-list-item-avatar>
                            </v-list-item>

                            <v-card-actions>
                                <v-btn rel="noopener noreferrer" text href="https://www.mcbbs.net/?2444378">MCBBS 资料页
                                </v-btn>
                                <v-btn rel="noopener noreferrer" text
                                       href="https://www.mcbbs.net/thread-926724-1-1.html">《大憨批》介绍
                                </v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-col>
                    <v-col col="12" md="6">
                        <v-card outlined>
                            <div class="overline mb-4">[广告招租]</div>
                            <v-skeleton-loader type="article"></v-skeleton-loader>
                            <v-skeleton-loader type="action"></v-skeleton-loader>
                        </v-card>
                    </v-col>
                </v-row>
            </v-container>
            <v-footer class="font-weight-light">
                {% if footer_existence %}
                    {% include './custom/footer.html' %}
                {% endif %}
            </v-footer>
        </v-main>
    </v-app>
</div>
<script>
    new Vue({
        el: '#app',
        methods: {
            download(name) {
                window.open(name)
            },
            submit() {
                this.loading = true
                let data = Object.assign({}, this.inputBasic, {
                    figure: this.input.figureOption === 'all' ? ['all'] : this.input.figure,
                    include: this.input.modOption === 'all' ? ['all'] : this.input.include,
                    hash: true
                })
                console.log(data)
                axios({url: '/ajax', method: 'POST', data}).then(function (res) {
                    console.log(res.data)
                    this.logs.unshift({
                        title: '构建成功',
                        ts: new Date().valueOf(),
                        content: res.data.logs,
                        filename: res.data.filename
                    })
                    this.logsPanel = this.logsPanel.map(v => v + 1)
                    this.logsPanel.unshift(0)
                    this.$nextTick(function () {
                        this.$refs.logs.scrollIntoView()
                    }.bind(this))
                    this.loading = false
                }.bind(this)).catch(function (err) {
                    this.logs.unshift({
                        title: '构建失败',
                        ts: new Date().valueOf(),
                        content: err.toString()
                    })
                    this.logsPanel = this.logsPanel.map(v => v + 1)
                    this.logsPanel.unshift(0)
                    this.$nextTick(function () {
                        this.$refs.logs.scrollIntoView()
                    }.bind(this))
                    this.loading = false
                }.bind(this))
            }
        },
        data: () => ({
            logsPanel: [],
            loading: false,
            inputBasic: {
                type: "normal",
                sfw: false,
                legacy: false,
                debug: false
            },
            logs: [],
            input: {
                figureOption: "all",
                modOption: "all",
                figure: [],
                include: []
            }
        }),
        computed: {
            consts: () => ({
                type: [{text: "普通版本", value: "normal"}, {text: "兼容版本", value: "compat"}],
                figureOption: [{text: "全部", value: "all"}, {text: "无", value: "none"}, {
                    text: "自定义",
                    value: "custom"
                }],
                modOption: [{text: "所有Mod内容", value: "all"}, {value: "none", text: "无Mod内容"}, {
                    value: "custom",
                    text: "自定义"
                }],
                modList: [{header: 'Mod文件'}].concat({{ mods|tojson }}).concat({header: 'Mod文件(未汉化)'})
                    .concat({{ enmods|tojson }}).concat({header: '附加内容'}).concat({{ optionals|tojson }}),
                figureList: {{ figures|tojson }}
            })
        },
        vuetify: new Vuetify(),
    })
</script>
</body>
</html>
